/*
 * @Description: 频道列表
 * @Author: Zzt
 * @Date: 2023-02-20 11:27:53
 * @LastEditTime: 2023-02-28 20:00:29
 */

import { Menu } from 'antd';
import classNames from 'classnames/bind';
import { useEffect } from 'react';
import { useAnnouncementContext } from '../contexts/AnnouncementContext';
import styles from '../styles/channel.module.scss';
const cx = classNames.bind(styles);
interface IChannel {
  name: string;
  id: number;
}

const ChannelList = () => {
  const { noticeTypeId, setSelectChannelId, getChannelList, channelList } =
    useAnnouncementContext();

  // 选中的频道类型id
  useEffect(() => {
    // TODO 调取接口获取频道列表
    getChannelList();
  }, []);
  /**
   * @description: 切换频道类型
   * @param {any} param1
   */
  const onChannelSelect = ({ key }: any) => {
    setSelectChannelId(parseInt(key, 10));
  };
  // const items = channelList.map((item: IChannel) => ({
  //   label: item.name,
  //   key: item.id
  // }));
  const items = [];
  items.unshift({ label: '全部', key: 0 });

  return (
    <>
      <div className={cx('channe-head')}>
        <div className={cx('channe-title', 'back')}>频道列表</div>
      </div>
      <div>
        <Menu
          items={items}
          selectedKeys={[`${noticeTypeId}`]}
          onSelect={onChannelSelect}
          style={{ width: 200 }}
        />
      </div>
    </>
  );
};
export default ChannelList;
